<template>
  <div class="add">
    <div class="title">船期申报</div>
    <el-form ref="form"
             :model="form"
             label-width="120px"
             size="small"
             inline
             :rules="rules">
      <el-form-item label="靠泊码头"
                    prop="termName">
        <el-input v-model="form.termName"
                  placeholder="请输入靠泊码头"
                  clearable
                  disabled
                  style="width:220px"></el-input>
        <!-- <el-select v-model="form.termCode"
                   placeholder="请选择"
                   clearable
                   style="width: 100%;"
                   @change="changeTermCode">
          <el-option v-for="item in termCodeList"
                     :key="item.id"
                     :label="item.workLocationNames"
                     value="HX"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="船舶名称"
                    prop="vslId">
        <el-select v-model="form.vslId"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:220px">
          <el-option v-for="item in vslIdList"
                     :key="item.id"
                     :label="item.cnname"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶类型"
                    prop="">
        <el-input placeholder=""
                  disabled
                  style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="内外贸"
                    prop="intrade">
        <el-select v-model="form.intrade"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in intradeList"
                     :key="item.lowValue"
                     :label="item.meaning"
                     :value="item.lowValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="进口航次"
                    prop="ivoyage">
        <el-input placeholder="请输入进口航次"
                  clearable
                  v-model="form.ivoyage"
                  style="width:220px"></el-input>
      </el-form-item>
      <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="进口航次作业区"
                    prop="iopaAreaCode">
        <el-select v-model="form.iopaAreaCode"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in  paAreaCodeList"
                     :key="item.code"
                     :label="item.cnName"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出口航次"
                    prop="evoyage">
        <el-input placeholder="请输入出口航次"
                  clearable
                  v-model="form.evoyage"
                  style="width:220px"></el-input>
      </el-form-item>
      <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="出口航次作业区"
                    prop="eopaAreaCode">
        <el-select v-model="form.eopaAreaCode"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in  paAreaCodeList"
                     :key="item.code"
                     :label="item.cnName"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划抵港时间"
                    prop="eta">
        <el-date-picker type="datetime"
                        placeholder="选择日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.eta"
                        style="width:220px"></el-date-picker>
      </el-form-item>
      <el-form-item label="计划离港时间"
                    prop="etd">
        <el-date-picker type="datetime"
                        placeholder="选择日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.etd"
                        style="width:220px"></el-date-picker>
      </el-form-item>
      <el-form-item label="运营人航线"
                    prop="slnId">
        <el-select v-model="form.slnId"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in slnIdList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船公司"
                    prop="cstShippingline">
        <el-input v-model="userInfoComputed"
                  placeholder="请输入船公司"
                  clearable
                  disabled
                  style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="船舶代理"
                    prop="cstAgency">
        <el-select v-model="form.cstAgency"
                   placeholder="请选择"
                   clearable
                   disabled
                   style="width:220px">
          <el-option label="区域一"
                     value="shanghai"></el-option>
          <el-option label="区域二"
                     value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="虚拟船期"
                    prop="">
        <el-checkbox v-model="form.virtualType"
                     true-label="V"
                     false-label="A"
                     style="width:220px"></el-checkbox>
      </el-form-item>
      <el-form-item label="备注"
                    prop="">
        <el-input type="textarea"
                  placeholder="请输入船期备注"
                  clearable
                  v-model="form.remark"
                  style="width:920px"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary"
                 size="small"
                 style="background-color:#043AA7"
                 @click.native="onSubmit"
                 :loading="btnLoading">提交申请</el-button>
      <!-- <el-button type="info"
                 plain
                 size="small"
                 @click.native="cancel">取消</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'addPlan',
  components: {},
  data() {
    return {
      intradeList: [],
      slnIdList: [],
      vslIdList: [],
      paAreaCodeList: [],
      termCodeList: [],
      form: {
        scdType: '',
        termName: '河西码头',
      },
      rules: {
        vslId: [
          { required: true, message: '请选择船舶名称', trigger: 'change' },
        ],
        intrade: [
          { required: true, message: '请选择内外贸', trigger: 'change' },
        ],
        eta: [
          { required: true, message: '请选择计划抵港时间', trigger: 'change' },
        ],
        etd: [
          { required: true, message: '请选择计划离港时间', trigger: 'change' },
        ],
        slnId: [
          { required: true, message: '请选择运营人航线', trigger: 'change' },
        ],
        ivoyage: [
          { required: true, message: '请输入进口航次', trigger: 'blur' },
        ],
        iopaAreaCode: [
          {
            required: true,
            message: '请选择进口航次作业区',
            trigger: 'change',
          },
        ],
        evoyage: [
          { required: true, message: '请输入出口航次', trigger: 'blur' },
        ],
        eopaAreaCode: [
          {
            required: true,
            message: '请选择出口航次作业区',
            trigger: 'change',
          },
        ],
      },
      userInfo: null,
      id: null,
      btnLoading: false,
    }
  },

  methods: {
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.form.id ? await this.editSchedules() : await this.addSchedules()
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
    },
    //靠泊码头
    customerByType() {
      this.$api
        .customerByType({ tenantTypeName: '码头' })
        .then((res) => {
          this.termCodeList = res.data.data
        })
        .catch((err) => {})
    },
    changeTermCode(v) {},
    //船舶名称
    vessles() {
      this.$api
        .vessles({
          cstShippingline: JSON.parse(localStorage.getItem('userInfo')).customerCode, //JSON.parse(localStorage.getItem('userInfo')).customerCode
          termCode: 'HX',
        })
        .then((res) => {
          this.vslIdList = res.data.data
        })
        .catch((err) => {})
    },
    //内外贸
    refCode() {
      this.$api
        .refCode({ domain: 'INTRADE_TYPE' })
        .then((res) => {
          this.intradeList = res.data.data
        })
        .catch((err) => {})
    },
    //进出口作业区
    opaAreaCode() {
      this.$api.opaAreaCode({ termCode: 'HX' }).then((res) => {
        this.paAreaCodeList = res.data.data
      })
    },
    //运营人航线
    serviceLines() {
      this.$api
        .serviceLines()
        .then((res) => {
          this.slnIdList = res.data.data
        })
        .catch((err) => {})
    },
    addSchedules() {
      this.btnLoading = true
      this.form.termCode = 'HX'
      this.form.fixscdshpfg = '1'
      this.form.cstShippingline = this.userInfo.customerCode
      this.$api
        .addSchedules(this.form)
        .then((res) => {
          this.$message.success('提交成功')
          this.btnLoading = false
          this.form = {
            scdType: this.form.scdType,
            termName: '河西码头',
          }
          this.$refs.form.resetFields()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    editSchedules() {
      this.btnLoading = true
      this.$api
        .editSchedules(this.form)
        .then((res) => {
          this.$message.success('编辑成功')
          this.btnLoading = false
          this.$router.back()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    //根据id查询明细
    findOne() {
      this.$api.findOne({ id: this.id }).then((res) => {
        this.form = res.data
      })
    },
  },

  computed: {
    userInfoComputed() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return this.userInfo.customerCode + '/' + this.userInfo.customerName
    },
  },
  watch: {},

  async mounted() {
    this.form.scdType =
      this.$route.name == 'addBulk' ? 'BULK_CARGO' : 'CONTAINER'
    this.id = this.$route.query.id
    if (this.id) {
      await this.findOne()
    }
    this.customerByType()
    this.refCode()
    this.serviceLines()
    this.opaAreaCode()
    this.vessles()
  },
}
</script>
<style lang='scss' scoped>
.add {
  //text-align: center;
  background-color: #fff;
  padding: 60px 40px;
  position: relative;
  .btn {
    text-align: center;
    .el-button {
      width: 100px;
    }
  }
  .title {
    position: absolute;
    background: #0f47b8;
    height: 40px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    padding-left: 20px;
    top: 0;
    left: 0;
    right: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
</style>